<script lang="tsx">
import { defineComponent, ref } from "vue"
import props from "./props"
import Bubble from "./components/bubble.vue"

export default defineComponent({
	name: "ChenTooltip",
	props,
	setup(props, { slots }) {
		return () => (
			<div class="tooltip-container">
				<Bubble info={props.content!}></Bubble>
				<div>{slots.default ? slots.default() : null}</div>
			</div>
		)
	},
})
</script>

<style lang="less" scoped>
.tooltip-container {
	position: relative;
	transition: all 0.5s;
	&:hover .bubble-container {
		opacity: 1;
		visibility: visible;
	}
}
// 设置内部bubble组件的宽高
.bubble-container {
	left: 50%; // 将left设置为50%
	transform: translateX(-50%); // 使用transform将其水平居中
	position: absolute;
	top: -45px;
	min-width: max-content;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s;
	&::after {
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		background-color: var(--chen-color-black);
		position: absolute;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
		bottom: -2px;
	}
}
</style>
